<template>
  <el-drawer
    v-model="visible"
    :title="`配置权限 - ${currentRole?.roleName || ''}`"
    size="500px"
  >
    <div class="permission-drawer-content">
      <el-tree
        :data="permissionTreeData"
        show-checkbox
        node-key="id"
        :props="{ label: 'label' }"
        :default-checked-keys="checkedPermissions"
        @check="handlePermissionChange"
      />
      <div class="drawer-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  ElDrawer,
  ElTree,
  ElButton
} from 'element-plus'

// 引入样式
import 'element-plus/es/components/drawer/style/css'
import 'element-plus/es/components/tree/style/css'
import 'element-plus/es/components/button/style/css'

const props = defineProps<{
  modelValue: boolean
  role?: any
}>()

const emit = defineEmits(['update:modelValue', 'save'])

// 控制抽屉显示
const visible = ref(false)
watch(() => props.modelValue, val => {
  visible.value = val
})
watch(() => visible.value, val => {
  emit('update:modelValue', val)
})

// 当前角色
const currentRole = ref<any>(null)
watch(() => props.role, val => {
  if (val) {
    currentRole.value = val
    checkedPermissions.value = val.permissions || []
  }
})

// 选中的权限
const checkedPermissions = ref<string[]>([])

// 权限树数据
const permissionTreeData = ref([
  {
    id: 'system',
    label: '系统管理',
    children: [
      {
        id: 'system:menu',
        label: '菜单管理',
        children: [
          { id: 'system:menu:list', label: '查看菜单' },
          { id: 'system:menu:create', label: '创建菜单' },
          { id: 'system:menu:update', label: '修改菜单' },
          { id: 'system:menu:delete', label: '删除菜单' }
        ]
      },
      {
        id: 'system:role',
        label: '角色管理',
        children: [
          { id: 'system:role:list', label: '查看角色' },
          { id: 'system:role:create', label: '创建角色' },
          { id: 'system:role:update', label: '修改角色' },
          { id: 'system:role:delete', label: '删除角色' },
          { id: 'system:role:permission', label: '权限配置' }
        ]
      },
      {
        id: 'system:user',
        label: '用户管理',
        children: [
          { id: 'system:user:list', label: '查看用户' },
          { id: 'system:user:create', label: '创建用户' },
          { id: 'system:user:update', label: '修改用户' },
          { id: 'system:user:delete', label: '删除用户' }
        ]
      }
    ]
  }
])

// 处理权限变更
const handlePermissionChange = (checked: string[]) => {
  checkedPermissions.value = checked
}

// 取消
const handleCancel = () => {
  visible.value = false
}

// 保存
const handleSave = async () => {
  try {
    emit('save', {
      roleId: currentRole.value?.id,
      permissions: checkedPermissions.value
    })
    visible.value = false
  } catch (error) {
    console.error('保存权限失败:', error)
    ElMessage.error('保存权限失败')
  }
}
</script>

<style lang="less" scoped>
.permission-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  
  :deep(.el-tree) {
    flex: 1;
    background-color: var(--el-bg-color);
    
    .el-tree-node__content {
      background-color: var(--el-bg-color);
    }
  }
}

.drawer-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--el-border-color-light);
  text-align: right;
  
  .el-button {
    margin-left: 8px;
  }
}

:deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--el-border-color-light);
  color: var(--el-text-color-primary);
}

:deep(.el-drawer__body) {
  padding: 20px;
}
</style> 
